@list-item-height: 135px;

.list {
  width: 100%;

  &.list-rect {

  }

  &.list-circle {
    .list-item-img {
      border-radius: @list-item-height;
    }
  }

  &-item {
    display: inline-block;
    padding: 5px;
    width: 20%;

    &-img {
      width: 100%;
      height: @list-item-height;
    }

    &-word {
      margin-top: 5px;
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-2-columns {
    .list-item {
      padding: 0;
      position: relative;
      width: 50%;

      &-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 136px;
        height: 84px;
      }

      &-desc {
        width: 100%;
        padding-left: 136px;

        &-title, &-content {
          padding: 8px;
        }
      }
    }
  }

  &-3-columns {
    .list-item {
      position: relative;
      width: 33.33%;

      &-img {
        float: left;
        height: 46px;
        width: 46px;
      }

      &-desc {
        float: left;

        &-title, &-content {
          padding: 5px;
        }

        &-tools {
          position: absolute;
          right: 5px;
          bottom: 5px;

          &.hidden {
            display: none;
          }
        }
      }

      &:hover {
        background-color: #ebebeb;

        .list-item-desc-tools {
          display: block;
        }
      }
    }
  }
}